<template>
  <div id="subpage" v-loading="loading">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>资讯管理</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/article/index">资讯管理</el-breadcrumb-item>
        <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <span class="title">资讯详情</span>
        <div style="display: flex">
          <el-button size="small" icon="el-icon-back" type="primary" @click="back()">返回</el-button>
        </div>
      </div>
      <div class="xcx-content">
        <div class="title">{{ postData.title }}</div>
        <div class="desc" v-html="postData.content"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      postData: [],
      id: "",
    };
  },
  /**
   * 进入页面加载
   */
  mounted() {
    var that = this;
    var query = that.$route.query;
    if (query.id) {
      that.id = query.id;
      that.getDetail();
    } else {
      that.loading = false;
    }
  },
  methods: {
    getDetail() {
      var that = this;
      that.axios
        .post("/article/detail", {
          id: that.id,
        })
        .then((res) => {
          console.log(res);
          if (res) {
            that.postData = res.data;
          }
          that.loading = false;
        });
    },
    /**
     * 返回
     */
    back() {
      this.$router.push("/article/index");
    },
  },
};
</script>
<style>
.title {
  font-size: 24px;
  line-height: 56px;
  font-weight: bold;
  text-align: center;
}

.desc {
  font-size: 16px;
  line-height: 32px;
  background: none;
  padding: 20px;
}
</style>